import MockList from '@/components/MockList';
import PolarImage from '@/components/PolarImage';
import PolarImage2 from '@/components/PolarImage2';
import PolarImage3 from '@/components/PolarImage3';
import RiskPrisonerList from '@/components/RiskPrisonerList';
import ZhexianImage from '@/components/ZhexianImage';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Card, Col, Input, Row, Tabs } from 'antd';

const Risk = () => {
  return (
    <Card title="风险评估">
      <Row gutter={20}>
        <Col span={6}>
          <Tabs>
            <Tabs.TabPane tab="风险人员" key={'1'}>
              <Input.Search placeholder="搜索"></Input.Search>
              <RiskPrisonerList></RiskPrisonerList>
            </Tabs.TabPane>
            <Tabs.TabPane tab="风险监室" key={'2'}></Tabs.TabPane>
          </Tabs>
        </Col>
        <Col span={18}>
          <Row gutter={20}>
            <Col>
              <Avatar shape="square" size={128} icon={<UserOutlined />} />
              <div className="label mt10">人员编号：xxx</div>
            </Col>
            <Col span={14}>
              <div className="label">姓名：</div>
              <div className="label">年龄：</div>
              <div className="label">位置：</div>
              <div className="label">犯罪类型：</div>
              <div className="label">案件进度：</div>
              <div className="label">入所时间：</div>
            </Col>
            <Col>
              <Card title="风险系数">
                <h1>88</h1>
                <div>二级风险</div>
              </Card>
            </Col>
          </Row>

          <Tabs>
            <Tabs.TabPane tab="风险评估" key={'1'}>
              <Row>
                <Col span={8}>
                  <h2 className="text-center">自然特征分析</h2>
                  <PolarImage container={'polar1'}></PolarImage>
                </Col>
                <Col span={8}>
                  <h2 className="text-center">心理特征分析</h2>
                  <PolarImage2 container={'polar2'}></PolarImage2>
                </Col>
                <Col span={8}>
                  <h2 className="text-center">风险类型分析</h2>
                  <PolarImage3 container={'polar3'}></PolarImage3>
                </Col>
              </Row>

              <h2 className="text-center">风险指数趋势</h2>
              <ZhexianImage container={'zhexian1'}></ZhexianImage>
            </Tabs.TabPane>
            <Tabs.TabPane tab="事件跟踪" key={'2'}>
              <MockList title="2024-04-04" desc="xxx违规"></MockList>
            </Tabs.TabPane>
            <Tabs.TabPane tab="岗位评估" key={'3'}>
              <MockList title="2024-04-04" desc="医生评估："></MockList>
              <MockList title="2024-04-04" desc="管教谈话："></MockList>
            </Tabs.TabPane>
          </Tabs>
        </Col>
      </Row>
    </Card>
  );
};

export default Risk;
